﻿<template>
  <el-form v-show="!isLoading" :size="size" :model="formData" :rules="rules" :label-width="labelWidth" :ref="formRef">
    <custom-field-form-item :data-key="dataKey" :data="data" :fields="fields" :table-id="tableId" :columns="columns"
                            @load-field-success="initRules" :validate-on-rule-change="false"
                            :readonly="readonly">
      <slot></slot>
    </custom-field-form-item>
  </el-form>

</template>
<script>
/**
 * 自定义字段数据展示、编辑组件
 */
function noop() {}
export default {
  name: "CustomFieldForm",
  // props:{
  //   title: {},action:{},headers:{},data:{},name:{},showFileList:{type:Array,default:false}
  //   ,accept:{},'on-preview':{},'on-remove':{},fileList:{type:Array,default:()=>{return []}}
  // },
  props: {
    rules:{type:Map,default:null},
    tableId: {type:String,default:null},
    columns:{type:Number,default: 1},
    size:{
      type:String,
      default:"normal",
    },
    data:{},
    //展示字段
    fields:{},
    //标签页宽度
    labelWidth:{
      type:String,
      default:'auto'
    },
    dataKey:{
      type:String,
      default:'id'
    },
    readonly:{type:Boolean,default:false},
    scope:{type:String,default:null},
  },
  data(){
    return {
      isLoading:true,
      formData:{},
      formRef:null,
    };
  },
  watch:{
    data(){
      this.$refs[this.formRef].clearValidate();
    },
    fields(){
    }

  },

  computed:{

  },
  created() {
    this.formRef = "custom_form_"+new Date().getTime();
  },
  methods:{
    initRules(fieldList,fieldValueMap) {
      let map = {};
      for(const item of fieldList) {
        if(item.show&&item.required) {
          map[item[this.dataKey]] = [{
            required: true,
            message: (item.displayConfig&&item.displayConfig.name?item.displayConfig.name:item.name)+'不能为空',
            trigger: ['blur','change'] },];
        }
      }
      // this.rules = map;
      this.formData = fieldValueMap;
      this.isLoading = false;

    },
    //清除校验状态
    clearValidate(){
      this.$refs[this.formRef].clearValidate();
    }
  }
};
</script>
